<template>
  <div class="demo-title">notice-bar/demo10</div>
  <NoticeBar
    text="Note that this is a notification message. The background color is customized here, and the gradient theme color will also be automatically set as the background color changes."
    background="#FFF1E8"
    color="#FF5722"
    scrollable
    :close-mode="false"
  >
    <template #right-icon>
      <Button size="mini" shape="round" type="info" color="#FF5722" style="margin-left: 8px">Turn on</Button>
    </template>
  </NoticeBar>
  <NoticeBar text="File is uploaded successfully!" background="#E8FFEA" color="#00B42A" :left-icon="true">
    <template #left-icon>
      <Icon name="success" class="ssc-notice-bar-left-icon" />
    </template>
  </NoticeBar>
  <NoticeBar
    text="The network connection is not available, please check the network settings."
    color="#F53F3F"
    background="#FFECE8"
    :left-icon="true"
    scrollable
  >
    <template #left-icon>
      <Icon name="tips" class="ssc-notice-bar-left-icon" />
    </template>
  </NoticeBar>
</template>

<script lang="ts" setup>
  import NoticeBar from '@sscd-mobile/notice-bar'
  import Button from '@sscd-mobile/button'
  import Icon from '@sscd-mobile/icon'
</script>

<style scoped lang="less">
  .ssc-notice-bar-left-icon {
    margin-right: 8px;
    width: 14px;
    height: 14px;
  }
  .ssc-notice-bar-right-icon {
    margin-left: 8px;
  }
</style>
